<template>
	<div class="RedisMonitor">
		<div class="RedisMonitor-warpper">
			<div class="redis-tabs">
				<Tabs :animated="false" @on-click="tabsClick">
			        <TabPane label="Redis队列" name="queue" icon="levels"></TabPane>
			        <TabPane label="Redis运行状态" name="status" icon="help-buoy"></TabPane>
			    </Tabs>
			</div>
			<div class="redis-content">
				<component :is="redisView"></component>
			</div>
		</div>
	</div>
</template>

<script>
	import queue from './queue.vue';
	import status from './status.vue';
	
	export default {
		components: {
			'queue': queue,
			'status': status
		},
		data() {
			return {
				redisView: 'queue'
			}
		},
		methods: {
			tabsClick(name) {
				this.redisView = name;
			}
		}
	}
</script>

<style scoped lang="scss">
	.RedisMonitor {
		width: 100%;
		height: 100%;
		.RedisMonitor-warpper {
			width: 100%;
			height: 100%;
			position: relative;
			.redis-tabs {
				padding: 0 5px;
			}
			.redis-content {
				position: absolute;
				left: 5px;
				right: 5px;
				top: 40px;
				bottom: 5px;
			}
		}
	}
</style>